<template>
  <div class="stream-markdown" ref="containerRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { marked } from 'marked'

const props = defineProps<{
  content: string
}>()

const containerRef = ref<HTMLDivElement>()

// 配置 marked 选项
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  breaks: false,
  pedantic: false,
})

// 处理流式渲染
const renderMarkdown = (content: string) => {
  if (!containerRef.value) return

  // 使用 marked 解析 Markdown
  const html = marked.parse(content)
  if (typeof html === 'string') {
    containerRef.value.innerHTML = html
  }
}

// 监听内容变化
watch(
  () => props.content,
  (newContent) => {
    renderMarkdown(newContent)
  },
  { immediate: true }
)

// 组件挂载时初始渲染
onMounted(() => {
  if (props.content) {
    renderMarkdown(props.content)
  }
})
</script>

<style scoped>
.stream-markdown {
  font-size: 14px;
  line-height: 1.6;
  color: inherit;
  padding: 16px;
  background: transparent !important;
}

.stream-markdown :deep(*) {
  background: transparent !important;
}

/* 标题样式 */
.stream-markdown :deep(h1),
.stream-markdown :deep(h2),
.stream-markdown :deep(h3),
.stream-markdown :deep(h4),
.stream-markdown :deep(h5),
.stream-markdown :deep(h6) {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}

/* 段落样式 */
.stream-markdown :deep(p) {
  margin-top: 0;
  margin-bottom: 16px;
  color: inherit;
}

/* 列表样式 */
.stream-markdown :deep(ul),
.stream-markdown :deep(ol) {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 2em;
  color: inherit;
}

/* 代码块样式 */
.stream-markdown :deep(pre) {
  margin: 16px 0;
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa !important;
  border-radius: 6px;
}

.stream-markdown :deep(code) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05) !important;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}

/* 引用样式 */
.stream-markdown :deep(blockquote) {
  margin: 0 0 16px;
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

/* 表格样式 */
.stream-markdown :deep(table) {
  display: block;
  width: 100%;
  overflow: auto;
  margin-top: 0;
  margin-bottom: 16px;
  border-spacing: 0;
  border-collapse: collapse;
  color: inherit;
}

.stream-markdown :deep(table th),
.stream-markdown :deep(table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
  color: inherit;
}

.stream-markdown :deep(table tr) {
  background-color: transparent !important;
  border-top: 1px solid #c6cbd1;
  color: inherit;
}

.stream-markdown :deep(table tr:nth-child(2n)) {
  background-color: transparent !important;
}

/* 图片样式 */
.stream-markdown :deep(img) {
  max-width: 100%;
  box-sizing: content-box;
  background-color: transparent !important;
  border-radius: 4px;
}

/* 水平线样式 */
.stream-markdown :deep(hr) {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

/* 链接样式 */
.stream-markdown :deep(a) {
  color: #0366d6;
  text-decoration: none;
}

.stream-markdown :deep(a:hover) {
  text-decoration: underline;
}

/* 列表项样式 */
.stream-markdown :deep(li) {
  color: inherit;
}

/* 强调样式 */
.stream-markdown :deep(strong),
.stream-markdown :deep(b) {
  font-weight: 600;
  color: inherit;
}

.stream-markdown :deep(em),
.stream-markdown :deep(i) {
  font-style: italic;
  color: inherit;
}
</style> 